<template>
  <div class="comput-result">
    <div class="result-box">
      <div class="tabs-box" v-show="showTabs">
        <div class="tabs-title">
          <span>控制断面名称</span>
        </div>
        <div class="tabs-list">
          <div
            :class="['list-item', currentIndex == index ? 'active' : '']"
            v-for="(item, index) in sectionArr"
            :key="index"
            @click="handleClickTabs(item, index)"
          >
            <el-tooltip :content="item.blknm" placement="top" :disabled="item.blknm.length < 6">
              <span>{{ item.blknm }}</span>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="box-right">
        <div class="comput-times">
          <div class="times-title">
            <span>计算场次：</span>
          </div>
          <div class="times-list" v-if="ccInfo.length > 0">
            <div
              :class="['times-item', currentTime == index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in ccInfo"
              @click="handleClickTime(item, index)"
            >
              <span>{{ item.ccCode }}</span>
            </div>
          </div>
          <div class="times-list" v-else>
            <div
              :class="['times-item', currentTime == index ? 'active' : '']"
              :key="index"
              v-for="(item, index) in ccInfos"
              @click="handleClickTime(item, index)"
            >
              <span>{{ item.code }}</span>
            </div>
          </div>
        </div>
        <div class="switch-box">
          <div class="comput-result-box">
            <div class="box-title">
              <span>各场次计算结果：</span>
            </div>
            <div class="box-form">
              <div class="form-item">
                <div class="item-title">
                  <span>场次名称：</span><span>{{ calcResult.info.ccName }}</span>
                </div>
                <div class="item-title">
                  <span>开始/结束时间：</span
                  ><span>{{ calcResult.info.startTime }} -- {{ calcResult.info.endTime }}</span>
                </div>
              </div>
              <div class="form-item">
                <div class="item-title">
                  <span>计算最高水位：</span><span>{{ '500' }}</span>
                </div>
                <div class="item-title">
                  <span>防洪高水位：</span><span>{{ '500' }}</span>
                </div>
                <div class="item-title">
                  <span>评定结果：</span
                  ><span class="pass">{{ calcResult.info.qual == 1 ? '合格' : '不合格' }}</span>
                </div>
              </div>
              <div class="form-item">
                <div class="item-title">
                  <span>计算耗时：</span><span>{{ calcResult.info.calDur }}</span>
                </div>
                <div class="item-title">
                  <span>计算最大下泄洪量：</span><span>{{ '200' }}</span>
                </div>
                <div class="item-title">
                  <span>计算安全泄洪量：</span><span>{{ '200' }}</span>
                </div>
                <div class="item-title">
                  <span>保护对象：</span><span>{{ '200' }}</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="!['规程调度'].includes(props.modelObj.typeName)" class="computed-table">
            <el-table
              border
              :data="calcResult.eigResult"
              style="width: 100%"
              highlight-current-row
              size="small"
              empty-text="暂无数据"
            >
              <el-table-column
                prop="fcMxq"
                label="模拟洪锋（m³/s）"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="rlMxq"
                label="实测洪锋（m³/s）"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="erV"
                label="洪量相对误差"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="fcV"
                label="模拟洪量（10⁶m³）"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="rlV"
                label="实测洪量（10⁶m³）"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="erMxq"
                label="洪锋相对误差%"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="fcMxt"
                label="模拟峰现时间"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="rlMxt"
                label="实测峰现时间"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="erMxt"
                label="误差(时段)h"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="alerMxt"
                label="许可误差（时段）h"
                width="180"
                align="center"
                show-overflow-tooltip
              />
              <el-table-column
                prop="cerCoe"
                label="确定性系数"
                width="180"
                align="center"
                show-overflow-tooltip
              />
            </el-table>
          </div>
          <!-- 规程调度 -->
          <div class="echarts-box" v-if="['规程调度'].includes(props.modelObj.typeName)">
            <rules-chart
              height="100%"
              :x-labels="state.sysTimes"
              :realwater-level="state.rzArr"
              :rain-area="state.rainArr"
              :simulate-water="state.fzArr"
              :real-flow="state.rqArr"
              :simulate-flow="state.fqArr"
            />
          </div>
          <!-- 其它水库调度 -->
          <div v-else class="echarts-box">
            <morey-chart
              height="100%"
              :x-labels="state.sysTimes"
              :realwater-level="state.rzArr"
              :rain-area="state.rainArr"
              :simulate-water="state.fzArr"
              :real-flow="state.rqArr"
              :simulate-flow="state.fqArr"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import rulesChart from '@/components/app-echart/rules-chart.vue'
// import sectionArr from '@/assets/data/com_data/sec_info.json'
// import cal_result_new from '@/assets/data/com_data/cal_result_new.json'
// import xaj_verify_info from '@/assets/data/com_data/xaj_verify_info.json'
import { getXajccResult } from '@/services/modules/model-verify'

const props = defineProps({
  showTabs: {
    type: Boolean,
    default: true
  },
  ccInfo: {
    type: Array,
    default: () => []
  },
  tabsId: {
    type: String,
    default: ''
  },
  modelObj: {
    type: Object,
    default: () => {}
  }
})
const sectionArr = ref([])
const ccInfos = ref([])
const calcResult = ref({ info: {} })
const currentIndex = ref(0)
const currentTime = ref(0)
const state = reactive({
  blkcdId: '',
  tabNewData: [],
  evaResult: {},
  tableData: [],
  //时间
  sysTimes: [],
  //降雨量
  rainArr: [],
  //实测流量
  rqArr: [],
  //模拟流量
  fqArr: [],
  //实测水位
  rzArr: [],
  //模拟水位
  fzArr: []
})
function dateFormat(str) {
  var date = new Date(new Date(str).getTime())
  var Y = date.getFullYear() + '-'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
  var h = ' ' + (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
  var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
  var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
  return Y + M + D + h + m + s
}
function clearEchart() {
  state.sysTimes = []
  state.rainArr = []
  state.rqArr = []
  state.fqArr = []
  state.rzArr = []
  state.fzArr = []
}
function handleClickTime(item, index) {
  clearEchart()
  currentTime.value = index
  getXajccResult({
    ccid: item.id
  }).then((res) => {
    if (res.code === 200) {
      console.log(res.data, '计算结果')
      calcResult.value = res.data
      res.data.ccResult.forEach((v, vIndex) => {
        state.sysTimes.push(v.tm)
        state.rainArr.push(v.p)
        state.rqArr.push(v.rq)
        state.fqArr.push(v.fq)
        state.rzArr.push(v.rz)
        state.fzArr.push(v.fz)
      })
    }
  })
  /* let arr = []
  if (props.tabsId) {
    arr = cal_result_new.filter((e) => {
      return e.blkcd === props.tabsId
    })
  } else {
    arr = cal_result_new.filter((e) => {
      return e.blkcd === state.blkcdId
    })
  }
  state.evaResult = arr[0].evaResult.filter((child) => {
    return child.code === item.code
  })
  state.tableData = state.evaResult
  if (item) {
    state.forecastResult = arr[0].forecastResult.filter((i) => {
      return i.ccCode === item.code
    })
    state.forecastResult[0]?.resultData.forEach((v, vIndex) => {
      state.sysTimes.push(v.tm)
      state.rainArr.push(v.p)
      state.rqArr.push(v.rq)
      state.fqArr.push(v.fq)
      state.rzArr.push(v.rz)
      state.fzArr.push(v.fz)
    })
  } */
}
function handleClickTabs(item, index) {
  state.blkcdId = item.blkcd ? item.blkcd : ''
  currentIndex.value = index
  state.tabNewData = xaj_verify_info.filter((e) => {
    return item.blkcd === e.blkcd
  })
  ccInfos.value = state.tabNewData[0]?.verifySchemes[0].ccInfo

  handleClickTime(ccInfos.value[0], 0)
}
watch(
  () => props.tabsId,
  () => {
    if (props.ccInfo[0]) {
      handleClickTime(props.ccInfo[0], 0)
    } else {
      // handleClickTabs(sectionArr[0], 0)
      // handleClickTime(ccInfos.value[0], 0)
    }
  }
)
onMounted(() => {
  if (props.ccInfo[0]) {
    handleClickTime(props.ccInfo[0], 0)
  } else {
    console.log('xxxxxxx')
    // handleClickTabs(sectionArr[0], 0)
    // handleClickTime(ccInfos.value[0], 0)
  }
})
</script>
<style lang="less" scoped>
.comput-result {
  width: 100%;
  font-size: 12px;
  height: 100%;
  .result-box {
    width: 100%;
    height: 100%;
    display: flex;
    .tabs-box {
      width: 120px;
      height: 100%;
      margin-right: 15px;
      .tabs-title {
        height: 30px;
        background: #f2f2f2;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        span {
          font-weight: 600;
        }
      }
      .tabs-list {
        height: calc(100% - 30px);
        background: #d7d4d427;
        overflow-y: auto;
        .list-item {
          width: 100%;
          height: 25px;
          text-align: center;
          cursor: pointer;
          &.active {
            span {
              color: #0154db;
            }
          }
          span {
            width: 100%;
            color: black;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        .list-item:hover {
          width: 100%;
          height: 25px;
          cursor: pointer;
          span {
            color: #0154db;
          }
        }
      }
    }
    .box-right {
      flex: 1;
      width: calc(100% - 135px);
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      .comput-times {
        width: 100%;
        height: 70px;
        .times-title {
          height: 30px;
          span {
            font-weight: 600;
          }
        }
        .times-list {
          display: flex;
          width: 100%;
          height: 40px;
          overflow-x: auto;
          white-space: nowrap;
          .times-item {
            width: 150px;
            height: 30px;
            border: 1px solid gray;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
            padding: 0 15px;
            cursor: pointer;
            &.active {
              span {
                color: #0154db;
              }
            }
            &:hover {
              color: #0154db;
            }
            span {
              color: gray;
            }
          }
        }
      }
      .switch-box {
        width: 100%;
        height: calc(100% - 70px);
        .comput-result-box {
          width: 100%;
          .box-title {
            height: 30px;
            padding-top: 10px;
            span {
              font-weight: 600;
            }
          }
          .box-form {
            .form-item {
              display: flex;
              justify-content: flex-start;

              width: 100%;
              margin-left: 10px;
              margin-bottom: 10px;
              .pass {
                color: #78ba1c;
              }
              .item-title {
                white-space: nowrap;
                width: 220px;
              }
            }
          }
        }
        .computed-table {
          width: 100%;
          // height: 80px;
          overflow-x: auto;
        }
        .echarts-box {
          width: 100%;
          height: calc(100% - 120px);
          // padding: 5px;
        }
      }
    }
  }
}
</style>
